<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>details</title>
    <link rel="stylesheet" href="css/details.css">
    <style>
        #bf {
            width: 280px;
            height: 280px;
            border: 1px solid #000;
            float: left;
            overflow: hidden;
            position: absolute;
            left: 10px;
            visibility: hidden;
            top: 102px;
            left: 386px;
            z-index: 100;

        }

        #bf img {
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="head">
        <div class="wrapper">
            <!--  导航 -->
            <span class="left logo">
                <a href="index.html">
                    <img src="images/logo.png" alt="vivo">
                </a>
            </span>
            <div class="no1_nav left">
                <ul class="gb-vivo-h-nav">
                    <li>
                        <a href="#">NEX系列</a>
                    </li>
                    <li>
                        <a href="#">X系列</a>
                    </li>
                    <li>
                        <a href="#">Y系列</a>
                    </li>
                    <li class="moren">
                        <a href="#">商城</a>
                    </li>
                    <li>
                        <a href="#">专卖店</a>
                    </li>
                    <li>
                        <a href="#">Funtouch OS</a>
                    </li>
                    <li>
                        <a href="#">服务</a>
                    </li>

                </ul>
            </div>

            <div class="head_mid_last left">
                <a class="search" href="#">
                    <img src="images/search.png" alt="">
                </a>
                <a class="log_reg" href="#">
                    <img src="images/user.png" alt="">
                </a>
            </div>
        </div>
        <div class="head_mid_hide">
            <!--  隐藏的导航 -->

        </div>
    </div>
    <div class="wra">
        <div class="login_nav">
            <ul>
                <li>
                    <a href="">购物车</a>
                </li>
                <li>
                    <a href="">我的订单</a>
                </li>
                <li>
                    <a href="">我的商城</a>
                </li>
                <li>
                    <a href="">登录/注册</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- <div id="zhaozi">

    </div> -->
    <div class="wrapper">
        <div class="crumbs">
            <a class="first" href="/index.html">商城首页</a>
            <b>></b>
            <a href="/product/phone">手机产品</a>
            <b>></b>
            <span>Y系列</span>
        </div>
    </div>
    <div class="container">
        <div class="middle_wrapper">
            <div class="prod-container-left">
                <div id="prod-container-left" style="position: absolute; top: 20px; left: 31.5px;">
                    <div id="j_SpecImgs" class="figure">
                        <ul id="spic">
                            <li style="display: none; opacity: 0; z-index: 1;">
                                <img src="images/4864_1526305389832hd_530x530.png" alt="商品图片">
                            </li>
                            <li style="z-index: 9; opacity: 1; display: block;">
                                <img src="images/4864_1526305391219hd_530x530.png" alt="商品图片">
                            </li>
                            <li style="z-index: 1; opacity: 0; display: none;">
                                <img src="images/4864_1526305392216hd_530x530.png" alt="商品图片">
                            </li>
                            <li style="z-index: 1; opacity: 0; display: none;">
                                <img src="images/4864_1526305393307hd_530x530.png" alt="商品图片">
                            </li>
                            <li style="z-index: 1; opacity: 0; display: none;">
                                <img src="images/4864_1526305394318hd_530x530.png" alt="商品图片">
                            </li>
                        </ul>
                        <div id="sf"></div>

                    </div>
                    <div id="bf">
                        <img src="images/4864_1526305389832hd_530x530.png" alt="" id="bpic">
                    </div>
                    <div id="j_SpecItems" class="spec-items">
                        <div id="smallImgUl" class="spec-items-box  ">
                            <ul class="cl" style="width: 455px; left: 0px;">
                                <li class="current">
                                    <a href="javascript:;">
                                        <img src="images/4864_1526305389832hd_530x530.png">
                                    </a>
                                </li>
                                <li class="">
                                    <a href="javascript:;">
                                        <img src="images/4864_1526305391219hd_530x530.png">
                                    </a>
                                </li>
                                <li class="">
                                    <a href="javascript:;">
                                        <img src="images/4864_1526305392216hd_530x530.png">
                                    </a>
                                </li>
                                <li class="">
                                    <a href="javascript:;">
                                        <img src="images/4864_1526305393307hd_530x530.png">
                                    </a>
                                </li>
                                <li class="">
                                    <a href="javascript:;">
                                        <img src="images/4864_1526305394318hd_530x530.png">
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <a href="javascript:;" class="figure-btn-l figure-btn-disabled"></a>
                        <a href="javascript:;" class="figure-btn-r"></a>

                    </div>
                    <div class="favor">
                        <ul class="cl">
                            <li class="collect">
                                <a id="j_CollectTrigger" href="javascript:;">
                                    <i class="iconshop icon-star"></i>收藏商品（
                                    <span id="favCount">23046</span>人收藏）</a>
                            </li>
                            <li class="share" id="J_Share">
                                <i class="iconshop icon-share"></i>分享

                            </li>
                        </ul>
                    </div>
                    <div class="prod-corner-icon"></div>
                </div>
            </div>
            <div class="prod-container-right" default-skuid="4864">
                <h1>Y69全网通 3GB+32GB</h1>
                <p class="promotion-words" id="promotionWords" style="overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3;">
                    <span>
                        【详情页领取100元优惠券，到手价899】
                    </span>
                    Y69A 前置1600万柔光自拍，正面指纹解锁，一体式机身设计，分屏多任务。
                </p>

                <div class="prod-summary-box cl">
                    <div class="table-cell summary-price">
                        <span class="now-price">
                            <dfn>¥</dfn>999</span>
                        <span class="origin-price">
                            <dfn>¥</dfn>1199</span>
                    </div>


                    <div class="table-cell summary-promotion">
                        <ul>
                            <li>
                                <div class="table-cell">
                                    <span class="label">积分</span>
                                </div>
                                <div class="table-cell">购买即送999积分</div>
                            </li>
                            <li class="prod-gift-block">
                                <div class="table-cell">
                                    <span class="label">赠品</span>
                                </div>
                                <div class="table-cell gift-box">
                                    <span class="gift-item" sku-id="5178" sku-smallpic="https://shopstatic.vivo.com.cn/vivoshop/commodity/78/5178_1531792028901hd_250x250.png"
                                        sku-saleprice="0" sku-name="Y69彩印说明书" spu-id="10437">
                                        <a href="10437?colorSkuid=5178" target="_blank">
                                            <img src="images/5178_1531792028901hd_250x250.png">
                                        </a>
                                        x 1
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="server-support-box">
                    <dl class="server-support cl">
                        <dt>商品支持：</dt>
                        <dd class="item" data-id="detail0">
                            花呗分期</dd>
                        <dd class="item" data-id="detail1">
                            以旧换新</dd>
                    </dl>
                </div>

                <form id="prod-detail-form" method="post">
                    <input type="hidden" id="spuId" name="spuId" value="10264">
                    <input type="hidden" id="cmdyCategoryId" name="cmdyCategoryId" value="230">
                    <dl class="prod-params cl">

                        <dt>选择版本容量</dt>
                        <dd>
                            <ul class="tags nettype-tags">
                                <input type="hidden" id="netType" name="netType" value="58">
                                <input type="hidden" id="storage" name="storage" value="2">
                                <li nettype="58" storage="2" class="on">
                                    全网通&nbsp;3G+32G版本

                                </li>
                            </ul>
                        </dd>

                        <br>
                        <br>
                        <br>
                        <dt>选择颜色</dt>
                        <dd>
                            <ul class="tags color-box" id="j_colors" marketable="1">


                                <li class="sub-sku disabled" skuinstallment="1" sku-store="0" sku-id="4852" sku-fullpay="0">
                                    <a class="color-eae1db " style="background-color: #eae1db" href="javascript:;"></a>
                                    金色

                                </li>


                                <li class="sub-sku on" skuinstallment="1" sku-store="1" sku-id="4864" sku-fullpay="0">
                                    <a class="color-000000 " style="background-color: #000000" href="javascript:;"></a>
                                    磨砂黑

                                </li>
                            </ul>
                        </dd>
                        <br>
                        <br>
                        <br>

                        <dd class="package-box">
                            <ul class="tags package-tags cl J_package_tags">
                                <li class="on" saleprice="999">
                                    <h2 class="pkg-title">官方标配</h2>
                                </li>
                                <li suitecode="148965093449366460" saleprice="1028" class="">
                                    <h2 class="pkg-title">原装耳机套餐</h2>
                                    <p class="pkg-price">
                                        <dfn>¥</dfn>1028
                                        <span class="red"> 省
                                            <dfn>¥</dfn>10</span>
                                    </p>
                                </li>
                                <li suitecode="152145322961717619" saleprice="1094" class="">
                                    <h2 class="pkg-title">乐心手环套餐</h2>
                                    <p class="pkg-price">
                                        <dfn>¥</dfn>1094
                                        <span class="red"> 省
                                            <dfn>¥</dfn>34</span>
                                    </p>
                                </li>
                            </ul>
                        </dd>
                        <br>
                        <br>
                        <br>
                        <dt>数量</dt>
                        <dd class="order-num">
                            <label id="dec" class="disabled">&nbsp;-</label>
                            <input id="add-num" type="text" maxlength="1" value="1" readonly="">
                            <label id="inc">&nbsp;+</label>
                            <small class="order-num-msg" id="order-num-msg">
                                (仅限购5部)
                            </small>
                        </dd>


                    </dl>
                </form>
                <div class="choiceTotal-box" id="J_choiceTotal">
                    <div class="table-cell">
                        <div class="totalPrice">
                            <dfn>¥</dfn>999.00
                        </div>
                    </div>
                    <div class="table-cell">已选： 全网通&nbsp;3G+32G版本 磨砂黑 官方标配 1件
                    </div>
                </div>
                <div id="j_normalBtns" class="btns prod-amount-normal cl" data-btn-seat="main">

                    <button type="button" class="btn--lg btn-next J_buy-button btn-confirm add-cart">
                        <i class="btn-inner" title="加入购物车">加入购物车</i>
                    </button>
                    <button class="btn--lg btn-confirm now-buy" type="button" title="立即购买">
                        <i class="btn-inner">立即购买</i>
                    </button>
                    <div id="error-msg" class="red hidden"></div>
                </div>
            </div>


        </div>
    </div>
    <script src="script/thirdplugins/jquery.min.js"></script>
<script src="script/js/details.js"></script>

</body>

</html>